<!DOCTYPE html>

<html>
<head>
<title>JSLayout: Splitters Example</title>
<style>
div {
margin: 0;
}

#toppanel {
padding: 0.25em 0.5em;
height: 10em;
background: #eef;
overflow: auto;
}

#content {
padding: 0.25em 0.5em;
background: #efe;
overflow: auto;
}

#leftpanel {
padding: 0.25em 0.5em;
width: 10em;
background: #fee;
overflow: auto;
}

.v-splitter {
width: 2px;
background: #bbb;
border-left: 1px solid #777;
border-right: 1px solid #ddd;
cursor: w-resize;
}

.h-splitter {
height: 2px;
background: #bbb;
border-top: 1px solid #777;
border-bottom: 1px solid #ddd;
cursor: n-resize;
/*[FIX] IE6 */
overflow: hidden;
}
</style>

<!--
<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
-->

<script src="../jslayout.js"></script>
<script src="_examples.js"></script>
<script src="sizzle/sizzle.js"></script>

<script>

var CursorManager = {
	setCursor: function (style) {
		document.getElementsByTagName('body')[0].style.cursor = style;
	},
	resetCursor: function () {
		document.getElementsByTagName('body')[0].style.cursor = '';
	}
};

function HorizontalSplitter(layout, panel, pixelSize, locateAfter) {
	// get container
	var container = panel.parentNode;
	// create the splitter
	var splitter = document.createElement('div');
	splitter.className = 'h-splitter';
	container.insertBefore(splitter, locateAfter ? panel.nextSibling : panel);
	// set initial panel size
	panel.style.height = pixelSize + 'px';
	
	// event handlers
	var mousePos = 0;
	var moveHandler = function (e) {
		pixelSize += e.pageY - mousePos;
		mousePos = e.pageY;
		panel.style.height = Math.max(Math.min(pixelSize, 500), 0) + 'px';
		
		// update layout
		layout.recalculate();
		// prevent text selection
		e.preventDefault();
	}
	addEvent(splitter, 'mousedown', function (e) {
		// get initial mouse position
		mousePos = (e.pageY || e.clientY);
		addEvent(document, 'mousemove', moveHandler);
		CursorManager.setCursor('n-resize');
		e.preventDefault();
	});
	addEvent(document, 'mouseup', function () {
		removeEvent(document, 'mousemove', moveHandler);
		CursorManager.resetCursor();
	});
}

function VerticalSplitter(layout, panel, pixelSize, locateAfter) {
	// get container
	var container = panel.parentNode;
	// create the splitter
	var splitter = document.createElement('div');
	splitter.className = 'v-splitter';
	container.insertBefore(splitter, locateAfter ? panel.nextSibling : panel);
	// set initial panel size
	panel.style.width = pixelSize + 'px';
	
	// event handlers
	var mousePos = 0;
	var moveHandler = function (e) {
		pixelSize += e.pageX - mousePos;
		mousePos = e.pageX;
		panel.style.width = Math.max(Math.min(pixelSize, 500), 0) + 'px';
		
		// update layout
		//[NOTE] horizontally, we have to update minima to prevent float wrapping
		layout.updateOrientationMinima(container);
		layout.recalculate();
		// prevent text selection
		e.preventDefault();
	}
	addEvent(splitter, 'mousedown', function (e) {
		// get initial mouse position
		mousePos = e.pageX;
		addEvent(document, 'mousemove', moveHandler);
		CursorManager.setCursor('w-resize');
		e.preventDefault();
	});
	addEvent(document, 'mouseup', function () {
		removeEvent(document, 'mousemove', moveHandler);
		CursorManager.resetCursor();
	});
}

onContent(function () {
	// node references
	var leftpanel = document.getElementById('leftpanel');
	var toppanel = document.getElementById('toppanel');
	var content = document.getElementById('content');
	
	// initialize layout
	var layout = new FullLayoutManager(document);
	// create splitters
	new HorizontalSplitter(layout, toppanel, 75, true);
	new VerticalSplitter(layout, leftpanel, 150, true);	
	// apply styles
	layout.setOrientation(document.getElementById('h-container'), 'horizontal');
	Sizzle('#h-container, #v-container, #h-container > *, #content').forEach(function (element) {
		layout.setFlexibleProperty(element, 'height');
	});
	Sizzle('#h-container, #v-container, #v-container > *').forEach(function (element) {
		layout.setFlexibleProperty(element, 'width');
	});
	// setup layout
	layout.calculate();
});

</script>
</head>

<body>
<div id="h-container">
<div id="leftpanel">
<p>This is a side panel. Drag the splitter to the right, up to 500 pixels wide.</p>
</div>
<div id="v-container">
<div id="toppanel">
<p>This is a top panel. Drag the splitter below, up to 500 pixels tall.</p>
</div>
<div id="content">
<h1>Splitters Example</h1>
<p><strong>This is an example of using JSLayout to create dynamic layouts, even when they are modified programmatically by JavaScript.</strong></p>
<p>In this example, the two splitters are created by JavaScript on page load and attached to their respective panels. The <code>calculate()</code> function of the <code>LayoutManager</code> is called after setting up the layout, as usual. When a splitter is dragged, its content box dimension (<code>width</code> or <code>height</code>) are changed via CSS, and all that is needed is a subsequent call to the <code>recalculate()</code> function to update the layout. Splitter's are just a sample of what's possible with a flexible layout.</p>
<p>There is one caveat with the vertical splitter: when any non-flexible horizontal child dimension of a horizontally-oriented box is changed, the minimum size of must be updated so that the content panel doesn't overflow or stay too wide. This is easily done by calling the <code>updateOrientationMinima()</code> function of the layout manager.</p>
</div>
</div>
</div>
</body>
</html>